<template>
  <!-- View -->
  <div id="nav">
    <div class="top">
      <button><i class="bi bi-geo-alt"></i></button>
      <img src="../assets/img/pic/logo/white.png" alt="" class="logo" />
      <i class="bi bi-search"></i>
      <input
        type="text"
        class="nsearch"
        placeholder="按内容搜索"
        v-model="kw"
      />
      <button>
        <i class="bi bi-shop-window"></i>
      </button>
    </div>
    <div class="bottom">
      <ul class="navlist clearfix">
        <li
          v-for="(item, index) in navlist"
          :key="index"
          class="fleft"
          @click="changeNav(item.id)"
        >
          {{ item.catename }}
          <div class="bottombar" v-if="index == active"></div>
        </li>
      </ul>
      <div class="classbtn">
        <i class="bi bi-list"></i>
        <span>分类</span>
      </div>
    </div>
  </div>
</template>
<script>
// JavaScript
import { mapActions, mapGetters } from "vuex";
import { CateList, Search } from "../util/request/api";
export default {
  data() {
    return {
      kw: "",
      active: 0,
      navlist: [
        {
          id: -1,
          catename: "推荐",
        },
      ],
    };
  },
  methods: {
    changeNav(id) {
      if (id == -1) {
        return;
      }
      
      let cateinfo = this.navlist.find((item) => {
        return item.id == id;
        
      });
      this.$router.push('/goodslist')
      console.log(cateinfo);
    },
    
    ...mapActions(["changeAction"]),
  },
  mounted() {
    CateList()
      .then((res) => {
        this.navlist.push(...res.list);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  computed: {
    ...mapGetters(["getItemList"]),
  },
};
</script>
<style scoped>
/* Style */
@import url("../assets/css/topnav.css");
</style>
